<template>
	<text class="iconfont" :class="'icon-' + name"
		:style="{ color: color, fontSize: size + 'px', fontWeight: bold ? 'bold' : 'normal'}" @click="onclick"></text>
</template>

<script>
	/**
	 * iconfont 图标
	 * @description 用于展示 iconfont 图标
	 * @property {Number} size 图标大小
	 * @property {String} type 图标图案，参考示例
	 * @property {String} color 图标颜色
	 * @event {Function} click 点击 Icon 触发事件
	 */
	export default {
		name: 'iconfont',
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: Number,
				default: 16
			},
			color: {
				type: String,
				default: '#000'
			},
			bold: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {
			onclick() {
				this.$emit('click')
			}
		}
	};
</script>

<style lang="scss">

</style>
